<!DOCTYPE html>
<html>
<head>
    <!-- Site made with Mobirise Website Builder v5.2.0, https://mobirise.com -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="Mobirise v5.2.0, mobirise.com">
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:image:src" content="../../assets/images/index-meta.jpg">
    <meta property="og:image" content="../../assets/images/index-meta.jpg">
    <meta name="twitter:title" content="Phantoms">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="https://img.picgo.net/2024/10/18/frame-1-121x121bc5d878c1dd0d5fc.png"
          onerror="this.onerror=null;this.src='./assets/images/frame-1-121x121.png';"
          type="image/x-icon">
    <meta name="description" content="FF14、FC/CWLS Phantomsのホームページです。">


    <title>User Registration</title>
    <link rel="stylesheet" href="../../assets/web/assets/mobirise-icons2/mobirise2.css">
    <link rel="stylesheet" href="../../assets/tether/tether.min.css">
    <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="../../assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="../../assets/dropdown/css/style.css">
    <link rel="stylesheet" href="../../assets/socicon/css/styles.css">
    <link rel="stylesheet" href="../../assets/theme/css/style.css">
    <link rel="preload" as="style" href="../../assets/mobirise/css/mbr-additional.css">
    <link rel="stylesheet" href="../../assets/mobirise/css/mbr-additional.css" type="text/css">

    <!--  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">-->
    <link rel="stylesheet" href="../../assets/web/assets/fontawesome.css">
    <link rel="stylesheet" href="../../vedio/play_vedio.css">
    <link rel="stylesheet" href="../../additions/mouse.css">

    <style>
        .form-button-wrapper {
            display: flex;
            justify-content: center;
        }
    </style>
</head>


<body>

<div id="menu"></div>
<script src="../../assets/web/assets/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#menu").load("../../additions/menu/menu3.html", function() {
            adjustLinks();
            window.addEventListener('resize', adjustLinks);
        });
    });
</script>

<section class="header1 cid-s48MCQYojq mbr-fullscreen" id="header1-f" >
    <div class="card-img-overlay" style="opacity:1; background-color: rgb(255, 255, 255);">
        <iframe src="../../additions/nest.html" frameborder="hide" style="width: 100%; height: 100%; max-width: 100%; object-fit: contain; opacity: 1"></iframe>
    </div>
    <div class="align-center container-fluid">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-8">
                <h2 class="mbr-section-title mbr-fonts-style mb-3 display-1"><strong>User Registration</strong></h2>
                <p class="mbr-text mbr-fonts-style display-7"><strong>成员注册</strong></p>
                <form action="/submit_registration" method="post">
                    <div class="form-button-wrapper">
                        <table>
                            <tr>
                                <th><label for="username">Username:</label></th>
                                <th><input type="text" id="username" name="username" required></th>
                            </tr>
                            <tr>
                                <td><label for="email">Email:</label></td>
                                <td><input type="email" id="email" name="email" required></td>
                            </tr>
                            <tr>
                                <td><label for="password">Pin:</label></td>
                                <td><input type="password" id="password" name="password" required onfocus="showTooltip()"></td>
                            </tr>
                        </table>
                    </div>
                    <div class="form-button-wrapper">
                        <input type="submit" value="Register" class="btn btn-black display-4">
                    </div>
                </form>

                <div id="tooltip" style="display: none; position: center; background-color: #bcd2e0; padding: 15px;">
                    Attention: PIN code should be 4 digits
                </div>

                <br>
                <p class="mbr-text mbr-fonts-style display-7"><strong>Phantoms</strong>: Freecompany and Cross-world Linkshell</p>

                <script src="../asserts/js/registerUser.js"></script>

            </div>
        </div>
    </div>
</section>

<section class="share3 cid-seeJd7VvmR" id="share3-o">
    <div class="container">
        <div class="media-container-row">
            <div class="col-12">
                <h3 class="mbr-section-title align-center mb-3 mbr-fonts-style display-2"><strong>Social Link</strong></h3>
                <div class="social-list align-center">
                    <a class="iconfont-wrapper bg-success m-2" href="https://jq.qq.com/?_wv=1027&k=FSun33H0" target="_blank">
                        <span class="socicon-qq socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                    <a class="iconfont-wrapper bg-youtube m-2" href="https://weibo.com/5722698883/LnwkL1Fk2" target="_blank">
                        <span class="socicon-weibo socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                    <a class="iconfont-wrapper bg-twitch m-2" href="https://kaihei.co/Pz0Q4r" target="_blank">
                        <span class="socicon-discord socicon"></span>
                    </a>
                    <a class="iconfont-wrapper bg-info m-2" href="https://github.com/YukiRinLL/FFXIV_Phantoms_MainPage" target="_blank">
                        <span class="socicon-github socicon" style="color: rgb(255, 255, 255); fill: rgb(255, 255, 255);"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="footer7 cid-seeJHoNSny" once="footers" id="footer7-p">


    <div class="container">
        <div class="media-container-row align-center mbr-white">
            <div class="col-12">
                <p class="mbr-text mb-0 mbr-fonts-style display-7">Copyright (C) SQUARE ENIX CO., LTD. All Rights Reserved.<br>Copyright&nbsp;(C) Crystal Alliance cir. All Rights Reserved.
                </p>
            </div>
        </div>
    </div>
</section>

<section style="background-color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; color:#aaa; font-size:12px; padding: 0; align-items: center; display: flex;"><a href="https://mobirise.site/n" style="flex: 1 1; height: 3rem; padding-left: 1rem;"></a><p style="flex: 0 0 auto; margin:0; padding-right:1rem;">Page was <a href="https://mobirise.site/g" style="color:#aaa;">designed</a> with Mobirise</p></section><script src="../../assets/web/assets/jquery/jquery.min.js"></script>  <script src="../../assets/popper/popper.min.js"></script>  <script src="../../assets/tether/tether.min.js"></script>  <script src="../../assets/bootstrap/js/bootstrap.min.js"></script>  <script src="../../assets/smoothscroll/smooth-scroll.js"></script>  <script src="../../assets/ytplayer/jquery.mb.ytplayer.min.js"></script>  <script src="../../assets/vimeoplayer/jquery.mb.vimeo_player.js"></script>  <script src="../../assets/dropdown/js/nav-dropdown.js"></script>  <script src="../../assets/dropdown/js/navbar-dropdown.js"></script>  <script src="../../assets/touchswipe/jquery.touch-swipe.min.js"></script>  <script src="../../assets/theme/js/script.js"></script>

</body>


<footer>

    <!--回到顶部按钮-->
    <!--Yuki:20190724-->
    <style>
        .box{
            position:fixed;
            right:20px;
            bottom: 480px;
            height:50px;
            width: 50px;
            text-align:center;
            padding-top:20px;
            background-color: black;
            border-radius: 20%;
            overflow: hidden;
        }.box:hover:before{
             top:50%
         }.box:hover .box-in{
              visibility: hidden;
          }.box:before{
               position: absolute;
               top: -50%;
               left: 50%;
               transform: translate(-50%,-50%);
               content:'TOP';
               width: 40px;
               color:white;
               font-weight:bold;
           }.box-in{
                visibility: visible;
                display:inline-block;
                height:20px;
                width: 20px;
                border: 3px solid black;
                border-color: white transparent transparent white;
                transform:rotate(45deg);
            }
    </style>
    <div id="box" class="box">
        <div class="box-in"></div>
    </div>
    <script>
        var timer  = null;
        box.onclick = function(){
            cancelAnimationFrame(timer);
            timer = requestAnimationFrame(
                function fn(){
                    var oTop = document.body.scrollTop || document.documentElement.scrollTop;
                    if(oTop > 0){
                        document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                        timer = requestAnimationFrame(fn);
                    }
                    else{
                        cancelAnimationFrame(timer);
                    }
                }
            );
        }
    </script>

    <!--更改网页标题-->
    <!--Yuki:20190724-->
    <title>标题</title>
    <script>
        document.title = '(ノ￣▽￣) Phantoms !'
    </script>
    <!--网页标题(title)动态改变-->
    <!--离开和回到当前页 网页标题改变-->
    <script>
        window.onload = function () {
            var OriginTitile = document.title;
            var titleTime;
            document.addEventListener('visibilitychange', function () {
                if (document.hidden) {
                    //$('[rel="shortcut icon"]').attr('href', "/Content/Images/fail.ico");
                    document.title = '( * ￣▽￣)／肿么不看了呢？';
                    clearTimeout(titleTime);
                }
                else {
                    //$('[rel="shortcut icon"]').attr('href', "/Content/Images/icon.png");
                    // document.title = '(～￣▽￣)～咦！又开始看了！' + OriginTitile;
                    document.title = '(～￣▽￣)～咦！又开始看了！';
                    titleTime = setTimeout(function () {
                        document.title = OriginTitile;
                    }, 2000);
                }
            });
        }
    </script>

    <!--text click effect-->
    <!--Yuki:20190724-->
    <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function($) {
            $("body").click(function(e) {
                var a = new Array("Astral","Umbral","Arcanum","Polyglot","Transcendent","Material","Original","Xenogeneic","Etheral","Sin" ,"Missionary","Requiem","Clement","Cristal","Zodiac");
                var $i = $("<span></span>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
                });
                $("body").append($i);
                $i.animate({
                        "top": y - 180,
                        "opacity": 0
                    },
                    1500,
                    function() {
                        $i.remove();
                    });
            });
        });
    </script>

</footer>

</html>

